<script setup>
import { ref, onMounted, watch } from 'vue';
import { initChart, fetchSunData } from './echarts.js';

const chartRef = ref(null);
const chart = ref(null);
const sunriseData = ref([]);
const sunsetData = ref([]);
const dates = ref([]);

onMounted(async () => {
  const data = await fetchSunData();
  dates.value = data.dates;
  sunriseData.value = data.sunriseData;
  sunsetData.value = data.sunsetData;
  chart.value = initChart(chartRef.value, sunriseData.value, sunsetData.value, dates.value);
});

watch([sunriseData, sunsetData, dates], () => {
  if (chart.value) {
    chart.value.dispose();
    chart.value = initChart(chartRef.value, sunriseData.value, sunsetData.value, dates.value);
  }
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<style scoped>
/* 可以添加自定义样式 */
</style>